<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="transparent" text-color="#fff"
    active-text-color="#fff">
    <div class="topIconBox">
      <div class="topIcon" @click="exit()">
        <img src="@/assets/img/home/loginOut.png" alt="" />
      </div>
      <div class="userInfo">
        <span>{{ userInfoData.name }}</span>
        <img :src="userInfoData.icon" alt="" />
      </div>
    </div>
  </el-menu>
</template>
<script>
import Bus from '@/api/bus.js'
import { userInfo } from "@/api/user";

export default {
  name: "navcon",
  data() {
    return {
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
      user: {},
      userName: "桃桃~",
      userHeaderImg:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2118524b-e88f-4a47-9c7d-db74697ee00d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700758948&t=d93ddc078fe08709fc8a708332e5cd38",
      userInfoData: "",
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem("userdata"));
    this.getUserData();
    Bus.$on("change", () => {
      this.getUserData();
    });
  },
  methods: {
    getUserData() {
      userInfo().then((res) => {
        if (res.code == 200) {
          this.userInfoData = res.data;
        } else {
          this.$message.info(res.msg);
        }
      });
    },
    // 退出登录
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit("logout", "false");
            this.$router.push({ path: "/login" });
            this.$message({
              type: "success",
              message: "已退出登录!",
            });
          }, 1000);
          localStorage.removeItem("Authorization");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },
  },
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}

.submenu {
  float: right;
}

.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}

.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}

.showimg:active {
  border: none;
}

.el-menu.el-menu--horizontal {
  border: none;
}

.topIcon {
  width: 32px;
  height: 32px;
  margin-left: 30px;
}

.topIcon img {
  width: 100%;
  height: 100%;
}

.topIconBox {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.userInfo {
  margin-left: 50px;
  margin-right: 40px;
  display: flex;
  align-items: center;
}

.userInfo img {
  width: 47px;
  height: 47px;
  border-radius: 24px;
  margin-left: 10px;
}

.userInfo span {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #436084;
}
</style>